<template>
  <views class="permission_manager_add">
    <div>
      <viewTitle :title="'权限分配'"></viewTitle>
      <div class="search">
        <el-form ref="form" label-width="auto">
          <el-form-item label="角色名称:">
            <el-input
                type="text"
                clearable
                :style="{width:250+'px'}"
                placeholder="请输入角色名称"
                v-model="role_name"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="table_list">
        <table :style="{border:this.$navigator?'1px solid rgba(238, 238, 238, 1)':'3px solid rgba(238, 238, 238, 1)'}">
          <tbody>
          <tr v-for="(item,index) in list" v-bind:key="index" class="tr_boder">
            <td class="td_1">
              <div>
                <el-checkbox v-model="item.checked" @change="itemChange(item)">{{item.menus_name}}</el-checkbox>
              </div>
            </td>
            <td class="en_td1 td_2">
          <tr v-for="(item2,index2) in item.sub_menus" v-bind:key="index2">
            <td class="td_2">
              <div>
                <el-checkbox v-model="item2.checked" @change="item2Change(item,item2)">{{item2.menus_name}}
                </el-checkbox>
              </div>
            </td>
          </tr>
          </td>
          <td class="en_td2">
            <tr class="flex flexC" v-if="item.list">
              <td
                  v-for="(item3,index3) in item.list"
                  class="td_2 flex flexR center"
                  v-bind:key="index3"
              >
                <div class="flex flexR">
                  <el-checkbox
                      v-for="(item4,index4) in item3"
                      v-model="item4.checked"
                      v-bind:key="index4"
                      @change="item4change(item,item3,item4)"
                  >{{item4.action_name}}
                  </el-checkbox>
                </div>
              </td>
            </tr>
          </td>
          </tr>
          </tbody>
        </table>
      </div>
      <!-- 按钮 -->
      <div class="flex flexR btn-list">
        <el-button type="primary" @click="submit" :loading="btnLoading">提交</el-button>
        <el-button type @click="reset">重置</el-button>
        <el-button type="warning" @click="()=>{ this.$router.go(-1)}">返回</el-button>
      </div>
    </div>
  </views>
</template>


<script>
	export default {
		data() {
			return {
				role_name: "", // 角色名称
				role_id: 0, // 角色名称
				list: [],
				list_bak: [],
				btnLoading: false
			};
		},
		methods: {
			return_list(list) {
				return list.list || [];
			},
			getData() {
				let post_data = {
					role_id: this.$route.query.role_id || 0
				};
				this.$raxios.post(this.$mapapi.admin_detailRole, {
					data: post_data
				}).then(res => {
					if (res.code == 200) {
						this.list = res.data.permission;
						this.list_bak = res.data.permission;
						this.role_name = res.data.role_name;
					} else {
						this.tableList = [];
						this.$message.error(res.msg);
						this.$message.error(res.msg)
					}
				}).catch(ret=>{

        })
			},
			submit() {
				this.btnLoading = true;
				this.$raxios.post(this.$mapapi.admin_entryRole, {
					data: this.post_data
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('录入角色成功');
						setTimeout(() => {
							this.$toRoutePath({
								path: "/permission_manager",
								edit: true,
								query: {}
							});
						}, 400)
					} else {
						this.tableList = [];
						this.$message.error(res.msg);
					}
				})
			},
			reset() {
				this.list = JSON.parse(JSON.stringify(this.list_bak));
			},
			itemChange(item) {
				item.sub_menus.forEach((ve) => {
					ve.checked = item.checked;
				});
				item.list.forEach((vl) => {
					vl.forEach((va) => {
						va.checked = item.checked;
					})
				})
			},
			item2Change(item, item2) {
				if (item2.checked) {
					item.checked = item2.checked;
				} else {
					this.updateItem(item);
				}
				//下面全改变
				item.list.forEach((vl) => {
					vl.forEach((va) => {
						if (va.menus_id == item2.menus_id) va.checked = item2.checked;
					})
				})
			},
			item4change(item, item3, item4) {
				this.updateItem2(item, item3, item4);
				this.updateItem(item);
				//修改sub_menus的actions
				item.sub_menus.forEach((vc) => {
					if (vc.menus_id == item4.menus_id) {
						vc.action_permission.forEach((vp) => {
							if (item4.action_key == vp.action_key) {
								vp.checked = item4.checked;
							}
						});
					}
				})
			},
			updateItem(item) {
				//判断兄弟姐妹是否有选中
				let temp = 0;
				item.sub_menus.forEach((ve) => {
					temp += ve.checked ? 1 : 0;
				});
				item.checked = temp > 0;
			},
			updateItem2(item, item3, item4) {
				//判断兄弟姐妹是否有选中
				let temp = 0;
				item3.forEach((ve) => {
					temp += ve.checked && ve.menus_id == item4.menus_id ? 1 : 0;
				});
				item.sub_menus.forEach((vo) => {
					if (vo.menus_id == item4.menus_id) {
						vo.checked = temp > 0;
					}
				})
			}
		},
		computed: {
			post_data() {
				let data = {};
				data.role_id = this.role_id;
				data.role_name = this.role_name;
				data.menus_ids = this.list;
				return data;
			}
		},
		mounted() {
			this.role_id = this.$route.query.role_id;
			this.getData();
		}
	};
</script>


<style lang="less" :scope="true" src="@/style/system_manager/permission_manager_add.less">
</style>
